<template>
  <div class="managementSetting">
    <div class="headnavigation">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>警务资源管理</el-breadcrumb-item>
        <el-breadcrumb-item class="currentPage">车辆管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <main class="content">
      <div class="TAB">
        <div>
          <section class="selectBox">
            <span>GPS编号</span>
            <el-select
              v-model="obj_searchData.s_card"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入GPS关键字"
              :remote-method="remoteMethod"
            >
              <el-option
                v-for="item in obj_returnRemoteData.arr_card"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </section>
          <section class="selectBox smallSelectBox">
            <span>车牌号</span>
            <el-select
              v-model="obj_searchData.s_name"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入车牌号关键字"
              :remote-method="remoteMethod"
            >
              <el-option
                v-for="item in obj_returnRemoteData.arr_name"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </section>
          <section class="selectBox">
            <span>所属部门</span>
            <el-select v-model="obj_searchData.s_deparment">
              <el-option
                v-for="item in obj_returnRemoteData.arr_deparment"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </section>
          <section class="left_button">
            <button>搜索</button>
            <button>重置</button>
          </section>
        </div>
        <div>
          <button @click="addcar">新增</button>
          <button @click="deleteEvent">删除</button>
        </div>
      </div>
      <div class="tableMain">
        <el-table
          ref="multipleTable"
          :data="arr_tableData"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" min-width="10%"></el-table-column>
          <el-table-column label="编号" width="60%" type="index"></el-table-column>
          <el-table-column prop="s_GPS" label="GPS编号" >
            <!-- <template slot-scope="scope">{{ scope.row.s_policenumber }}</template> -->
          </el-table-column>
          <el-table-column prop="s_carnumber" label="车牌号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="s_cartype" label="车辆种类信息" show-overflow-tooltip></el-table-column>
          <el-table-column prop="s_deparment" label="所属部门" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                class="editButton"
                @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button>
              <el-button
                class="deleteBtn"
                size="mini"
                @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 编辑事件弹窗 -->
      <el-dialog
        title="编辑账户信息"
        :visible.sync="b_editDialogVisible"
        class="editDialogVisible"
        width="25%"
        center="true">
        <form>
          <div>
            <div>
              <label for="userName">
                GPS编号:
                <input type="text" id="userName" />
              </label>
            </div>
            <div>
              <label for="phoneNumber">
                车牌号:
                <input type="text" id="phoneNumber" />
              </label>
            </div>
            <div>
              <label for="policePosition">
                车辆种类信息:
                <input type="text" id="policePosition" />
              </label>
            </div>
            <div>
              <label>
                所属部门:
                <el-select v-model="s_deparment">
                  <el-option
                    v-for="item in obj_returnRemoteData.arr_deparment"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </label>
            </div>
          </div>
        </form>
        <div class="editDialogButton">
          <button @click.prevent="b_editDialogVisible = false">保 存</button>
          <button @click.prevent="b_editDialogVisible = false">取 消</button>
        </div>
      </el-dialog>
      <!-- 删除事件弹窗 -->
      <el-dialog
        title="单个删除"
        :visible.sync="d_editDialogVisible"
        class="ditDialogVisible"
        width="20%"
        center="true">
        <form>
          <div class="photo">
            <img
              style="width: 18px;height: 18px;background: #FA504B;border-radius: 50%;"
              src="../../assets/监测预警@3x.png"
              alt/>
            <p style="font-size: 18px;">是否确定删除“张三”人员</p>
          </div>
        </form>
        <div class="deleteDialogButton">
            <button class="cancel" @click.prevent="d_editDialogVisible = false">取 消</button>
            <button class="delete" @click.prevent="d_editDialogVisible = false">删 除</button>
          </div>
      </el-dialog>
      <!-- 新增装备事件弹窗 -->
      <el-dialog
        title="新增车辆信息"
        :visible.sync="addcar_editDialogVisible"
        class="editDialogVisible"
        width="25%"
        center="true">
        <form>
          <div>
            <div>
              <label for="equipmentName">
                GPS编号:
                <input type="text" id="equipmentName" />
              </label>
            </div>
            <div>
              <label for="equipmentType">
              车牌号:
                <input type="text" id="equipmentType" />
              </label>
            </div>
            <div>
              <label for="phoneNumber">
                车辆种类信息:
                <input type="text" id="phoneNumber" />
              </label>
            </div>
            <div>
              <label>
                所属部门:
                <el-select v-model="s_deparment">
                  <el-option
                    v-for="item in obj_returnRemoteData.arr_deparment"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </label>
            </div>
          </div>
        </form>
        <div class="editDialogButton">
          <button @click.prevent="addcar_editDialogVisible = false">保 存</button>
          <button @click.prevent="addcar_editDialogVisible = false">取 消</button>
        </div>
      </el-dialog>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          v-model:currentPage="s_currentPage"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="60"
        ></el-pagination>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      s_currentPage: "",
      arr_tableData: [
        {
          s_GPS: "62845965",
          s_carnumber: "渝A99999",
          s_cartype:"奥迪A6",
          s_deparment: "两江分局",
        },
        {
          s_GPS: "62845965",
          s_carnumber: "渝A99999",
          s_cartype:"奥迪A6",
          s_deparment: "两江分局",
        },
        {
          s_GPS: "62845965",
          s_carnumber: "渝A99999",
          s_cartype:"奥迪A6",
          s_deparment: "两江分局",
        },
        {
          s_GPS: "62845965",
          s_carnumber: "渝A99999",
          s_cartype:"奥迪A6",
          s_deparment: "两江分局",
        },
        {
          s_GPS: "62845965",
          s_carnumber: "渝A99999",
          s_cartype:"奥迪A6",
          s_deparment: "两江分局",
        },
        {
          s_GPS: "62845965",
          s_carnumber: "渝A99999",
          s_cartype:"奥迪A6",
          s_deparment: "两江分局",
        },
        {
          s_GPS: "62845965",
          s_carnumber: "渝A99999",
          s_cartype:"奥迪A6",
          s_deparment: "两江分局",
        },
        {
          s_GPS: "62845965",
          s_carnumber: "渝A99999",
          s_cartype:"奥迪A6",
          s_deparment: "两江分局",
        },
        
      ],
      obj_searchData: {
        s_card: "",
        s_name: "",
        s_deparment: "",
        s_userPosition: ""
      },

      // 模糊查询，远程搜索返回结果
      obj_returnRemoteData: {
        arr_card: [],
        arr_name: [],
        arr_deparment: ["两江分局", "鸳鸯派出所"],
        arr_userPosition: []
      },
      //编辑
      b_editDialogVisible: false,
      //删除
      d_editDialogVisible: false,
      //新增车辆
      addcar_editDialogVisible: false
    };
  },
  methods: {
    remoteMethod(value) {},
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //编辑
    handleEdit(index, row) {
      this.b_editDialogVisible = true;
      console.log(index, row);
    },
    //删除
    handleDelete(index, row) {
      this.d_editDialogVisible = true;
      console.log(index, row);
    },
    //新增车辆
    addcar(index, row) {
      this.addcar_editDialogVisible = true;
      console.log(index, row);
    },
    deleteEvent() {
      this.$confirm("是否确定删除车牌号“渝A99999”等2辆车辆?", "批量删除", {
        cancelButtonText: "取消",
        confirmButtonText: "删除",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss">
@import "../../assets/sass/systemSass/managementSetting.scss";
</style>